<template>
  <div class="zxcj-add">
    <!-- 自定义返回按钮 -->
    <!-- <van-nav-bar title="标题" left-text="返回" left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar> -->
    <van-form @submit="onSubmit" :show-error-message="false">
      <!-- 基础信息 -->
      <van-row class="margin-top-12">
        <van-field
          v-model="form.zcr"
          name="zcr"
          label="自查人员"
          placeholder="自查人员"
          :rules="[{ required: true, message: '请填写用户名' }]"
          required
        />
      </van-row>
      <!-- 消防安全管理 -->
      <van-row class="margin-top-12 bgWhite">
        <p class="base-title">消防安全管理</p>
        <van-field name="xfaqglXfaqzd" label="消防安全制度" :rules="[{ required: true, message: '请选择' }]" required>
          <template #input>
            <van-radio-group v-model="form.xfaqglXfaqzd" direction="horizontal">
              <van-radio name="有">有</van-radio>
              <van-radio name="无">无</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="xfaqglXfaqjypx" label="消防安全教育培训" :rules="[{ required: true, message: '请选择' }]" required>
          <template #input>
            <van-radio-group v-model="form.xfaqglXfaqjypx" direction="horizontal">
              <van-radio name="组织开展">组织开展</van-radio>
              <van-radio name="未组织开展">未组织开展</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="xfaqglFhjc" label="防火检查" :rules="[{ required: true, message: '请选择' }]" required>
          <template #input>
            <van-radio-group v-model="form.xfaqglFhjc" direction="horizontal">
              <van-radio name="组织开展">组织开展</van-radio>
              <van-radio name="未组织开展">未组织开展</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="form.xfaqglBz"
          name="xfaqglBz"
          rows="3"
          autosize
          label="备注"
          type="textarea"
          placeholder="填写备注信息"
        />
      </van-row>
      <!-- 建筑防火消防设施 -->
      <van-row class="margin-top-12 bgWhite">
        <p class="base-title">建筑防火消防设施</p>
        <van-field name="jzfhssXfctd" label="消防车通道" :rules="[{ required: true, message: '请选择' }]" required>
          <template #input>
            <van-radio-group v-model="form.jzfhssXfctd" direction="horizontal">
              <van-radio name="畅通">畅通</van-radio>
              <van-radio name="被堵塞">被堵塞</van-radio>
              <van-radio name="占用">占用</van-radio>
              <van-radio name="无">无</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="jzfhssAqck" label="疏散通道、安全出口" :rules="[{ required: true, message: '请选择' }]" required>
          <template #input>
            <van-radio-group v-model="form.jzfhssAqck" direction="horizontal">
              <van-radio name="畅通">畅通</van-radio>
              <van-radio name="被堵塞">被堵塞</van-radio>
              <van-radio name="锁闭">锁闭</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="jzfhssYjzm" label="应急照明、疏散指示标志" :rules="[{ required: true, message: '请选择' }]" required>
          <template #input>
            <van-radio-group v-model="form.jzfhssYjzm" direction="horizontal">
              <van-radio name="完好有效">完好有效</van-radio>
              <van-radio name="损坏">损坏</van-radio>
              <van-radio name="缺少">缺少</van-radio>
              <van-radio name="无">无</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="jzfhssZaw" label="外墙门窗上是否设置影响逃生、灭火求援的障碍物" :rules="[{ required: true, message: '请选择' }]" required>
          <template #input>
            <van-radio-group v-model="form.jzfhssZaw" direction="horizontal">
              <van-radio name="是">是</van-radio>
              <van-radio name="否">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="jzfhssFdmj" label="灭火器、逃生绳、防毒面具等" :rules="[{ required: true, message: '请选择' }]" required>
          <template #input>
            <van-radio-group v-model="form.jzfhssFdmj" direction="horizontal">
              <van-radio name="未配置">未配置</van-radio>
              <van-radio name="完好有效">完好有效</van-radio>
              <van-radio name="失效">失效</van-radio>
              <van-radio name="缺少">缺少</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="jzfhssWxp" label="是否存在违反消防安全规定储存易燃易爆危险品" :rules="[{ required: true, message: '请选择' }]" required>
          <template #input>
            <van-radio-group v-model="form.jzfhssWxp" direction="horizontal">
              <van-radio name="否">否</van-radio>
              <van-radio name="是">是</van-radio>
              <van-radio name="不涉及">不涉及</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="form.jzfhssBz"
          name="jzfhssBz"
          rows="3"
          autosize
          label="备注"
          type="textarea"
          placeholder="填写备注信息"
        />
      </van-row>
      <!-- 治安检查情况 -->
      <van-row class="margin-top-12 bgWhite">
        <p class="base-title">治安检查情况</p>
        <van-field name="zajcqkSp" label="视频监控是否达到要求" :rules="[{ required: true, message: '请选择' }]" required>
          <template #input>
            <van-radio-group v-model="form.zajcqkSp" direction="horizontal">
              <van-radio name="有，达标">有，达标</van-radio>
              <van-radio name="有未达到30天">有未达到30天</van-radio>
              <van-radio name="无">无</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="form.zajcqkSsdjqk"
          name="zajcqkSsdjqk"
          rows="3"
          autosize
          label="四实登记情况核对"
          type="textarea"
          placeholder="填写四实登记情况核对"
          :rules="[{ required: true, message: '填写四实登记情况核对' }]"
          required
        />
        <van-field
          v-model="form.bz"
          name="bz"
          rows="3"
          autosize
          label="备注"
          type="textarea"
          placeholder="请输入备注信息"
          maxlength="8000"
          show-word-limit
          :rules="[{ required: true, message: '请输入备注信息' }]"
          required
        />
      </van-row>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { addXfzc } from '@/api/xfgl';
export default {
  name: 'zcjl-add',
  data() {
    return {
      fyInfo: JSON.parse(window.localStorage.getItem('fyInfo')),
      form: {
        zcr: '',
        xfaqglXfaqzd: '',
        xfaqglXfaqjypx: '',
        xfaqglFhjc: '',
        jzfhssXfctd: '',
        jzfhssAqck: '',
        jzfhssYjzm: '',
        jzfhssZaw: '',
        jzfhssFdmj: '',
        jzfhssWxp: '',
        jzfhssBz: '',
        zajcqkSp: '',
        zajcqkSsdjqk: '',
        ssdjbz: '',
        bz: ''
      }

    }
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
      let params = values;
      params.placeCode = this.fyInfo.placeCode;
      params.houseCode = this.fyInfo.houseCode;
      addXfzc(values).then(res => {
        if(res.code == 200) {
          this.$notify({ type: 'success', message: '提交成功！' });
          this.$router.back(-1)
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.zxcj-add {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #F5F5F5;
  .margin-top-12 {
    margin-top: 12px;
  }
  .bgWhite {
    background-color: #fff;
  }
  .base-title {
    text-align: left;
    padding: 16px 16px 6px;
    color: #333333;
    font-size: 15px;
    font-weight: 600;
  }
  /deep/ .van-field {
    display: block;
    .van-field__label {
      font-size: 13px;
      width: 90%;
    }
    .van-radio-group {
      width: 100%;
      .van-radio {
        width: calc(50% - 12px);
        margin-top: 5px;
        margin-bottom: 8px;
      }
    }
  }
}

</style>